window.onload=function() {
    // $("#button").click(function (){
    //     $.ajax({
    //         url:"/json_data",
    //         type:"post",
    //         dataType:"json",
    //         success:function(resp){     //[ [Object object],[Object object] ]
    //             $("#div").append(JSON.stringify(resp))  //将json对象转成json字符串
    //         }
    //     })
    // })


    //加载echarts
    var myChart = echarts.init(document.getElementById("main"), "vintage");
    //静态数据
    var option = {
        // backgroundColor:'rgb(73,66,66)',
        //背景图片
        graphic: [
            {
                type: 'image', // 图形元素类型
                id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                right: 'center', // 根据父元素进行定位 （居中）
                bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                z: 0,  // 层叠
                bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                style: {
                    image: '/img/背景图片.jpg',
                    width: 2200,
                    height: 2000
                }
            }
        ]
    };

    //标题
    $.ajax({
        type: "post",
        url: "/get_total_cases",
        dataType: "json",        //返回数据形式为json
        success: function (totalCases) {

            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //动态加载数据图表
                //与全局变量的option重复的字段会覆盖原值
                // title: [ //文本数值显示
                //     {text: 'hou ',x: '2%',y: '2%',
                //         textStyle: {fontSize: 20,color:'rgb(255,255,0)'}}
                // ]

                title: [ //文本数值显示
                    {text: '全国新冠疫情数据展示平台', x: '5%', y: '2%', textStyle: {fontSize: 30, color: 'rgb(255,255,255)'}},
                    {
                        text: '（数据来源：国家及各地卫健委每日信息发布）',
                        x: '5%',
                        y: '6%',
                        textStyle: {fontSize: 15, color: "rgb(49,47,47)"}
                    },
                    {
                        text: '2022-12-01 ~ 2022-12-15',
                        x: '35%',
                        y: '6%',
                        textStyle: {fontSize: 15, color: "rgb(255,255,255)"}
                    },
                    {text: '较昨日变化数', x: '20%', y: '20%', textStyle: {fontSize: 20, color: "rgb(49,47,47)"}},
                    {
                        text: "+" + totalCases.confirmed_thanYester,
                        x: '5%',
                        y: '25%',
                        textStyle: {fontSize: 20, color: 'rgb(255,0,0)'}
                    },
                    {
                        text: totalCases.suspected_thanYester,
                        x: '18%',
                        y: '25%',
                        textStyle: {fontSize: 20, color: 'rgb(227,178,137)'}
                    },
                    {
                        text: "+" + totalCases.cured_thanYester,
                        x: '27%',
                        y: '25%',
                        textStyle: {fontSize: 20, color: 'rgb(5,152,8)'}
                    },
                    {
                        text: "+" + totalCases.dead_thanYester,
                        x: '40%',
                        y: '25%',
                        textStyle: {fontSize: 20, color: 'rgb(182,174,174)'}
                    },
                    {text: '确诊人数 ', x: '5%', y: '10%', textStyle: {fontSize: 20, color: 'rgb(255,0,0)'}},
                    {
                        text: totalCases.confirmed_cases,
                        x: '5%',
                        y: '15%',
                        textStyle: {fontSize: 20, color: 'rgb(255,0,0)'}
                    },
                    {text: '疑似人数 ', x: '18%', y: '10%', textStyle: {fontSize: 20, color: 'rgb(227,178,137)'}},
                    {
                        text: totalCases.suspected_cases,
                        x: '18%',
                        y: '15%',
                        textStyle: {fontSize: 20, color: 'rgb(227,178,137)'}
                    },
                    {text: '治愈人数 ', x: '27%', y: '10%', textStyle: {fontSize: 20, color: 'rgb(5,152,8)'}},
                    {
                        text: totalCases.cured_cases,
                        x: '27%',
                        y: '15%',
                        textStyle: {fontSize: 20, color: 'rgb(5,152,8)'}
                    },
                    {text: '死亡人数 ', x: '40%', y: '10%', textStyle: {fontSize: 20, color: 'rgb(182,174,174)'}},
                    {
                        text: totalCases.dead_cases,
                        x: '40%',
                        y: '15%',
                        textStyle: {fontSize: 20, color: 'rgb(182,174,174)'}
                    }
                ]
            });
        }
    });

    //省份城市数据列表
    $.ajax({
        type: "post",
        url: "/getAll",
        dataType: "json",        //返回数据形式为json
        success: function (provinces) {
            //省份对应城市子列表
            //isShown=0 子列表不显示
            //isShown=1 子列表显示
            var isShown=0;
            function showDetail(){
                var provinceName=this.attr("id");
                alert("hhh")
                if (isShown ===0){
                    isShown=1;
                    //    显示子列表
                    $.ajax({
                        type:"post",
                        url:"/getProvince?proName="+provinceName,
                        dataType:"json",
                        success:function (cities){    //[{city:"",confirmed:,dead:,cured:}]
                            for(var j=0;j<cities.length;j++){
                                $("#"+provinceName).after("<tr class='push-down-row' style='color: cornflowerblue'>" +
                                    "<td >" + cities[j].province +
                                    "</td>" + "<td>" + cities[j].confirmed_cases +
                                    "</td>" + "<td>" + cities[j].dead_cases +
                                    "</td>" + "<td>" + cities[j].cured_cases +
                                    "</tr>"
                                );
                            }
                        }
                    })
                }
            }

            for (var i = 0; i < provinces.length; i++) {
                $("#table").append("<tr class='city-tr' id='"+provinces[i].province+"' style='color: black'>" +
                    "<td >" + provinces[i].province +
                    "</td>" + "<td>" + provinces[i].confirmed_cases +
                    "</td>" + "<td>" + provinces[i].dead_cases +
                    "</td>" + "<td>" + provinces[i].cured_cases +
                    "</td>" +"<td><a href='/detail?province="+provinces[i].province+"'>详情</a></td>"+
                    "</tr>"
                );
            }

            var trs=document.getElementsByClassName("city-tr");
            for(var k=0;k<trs.length;k++){
                trs[k].onclick=showDetail;
            }
        }
    })

    //折线图
    var lineChart = echarts.init(document.getElementById('line'));
    var lineOption = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['2022-12-01', '2022-12-02', '2022-12-03', '2022-12-04', '2022-12-05', '2022-12-06', '2022-12-07', '2022-12-08', '2022-12-09',
                '2022-12-10', '2022-12-11', '2022-12-12', '2022-12-13', '2022-12-14', '2022-12-15']
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: ['确诊人数', '治愈人数', '死亡人数']
        }
    };

    //填充折线图数据
    $.ajax({
        type: "post",
        url: "/getEveryDay",
        dataType: "json",        //返回数据形式为json
        success: function (totalCases) {//{时间：date,确诊人数：data,治愈人数：data,死亡人数：data}
            var confirmed = [];
            var cured = [];
            var dead = [];
            for (var i = 0; i < totalCases.length; i++) {
                confirmed.push(totalCases[i].confirmed_cases);
                cured.push(totalCases[i].cured_cases);
                dead.push(totalCases[i].dead_cases);
            }
            lineChart.hideLoading();    //隐藏加载动画
            lineChart.setOption({        //动态加载数据图表
                series: [
                    {
                        data: confirmed,
                        type: 'line',
                        name: '确诊人数',
                        stack: '总量'
                    },
                    {
                        data: cured,
                        type: 'line',
                        name: '治愈人数',
                        stack: '总量'
                    },
                    {
                        data: dead,
                        type: 'line',
                        name: '死亡人数',
                        stack: '总量'
                    }
                ]
            })
        }
    });

    //时间线
    var timeLineChart = echarts.init(document.getElementById("timeLine"));
    var timeLineOption = {
        baseOption: {
            timeline: {
                data: ['2022-12-01', '2022-12-02', '2022-12-03', '2022-12-04', '2022-12-05', '2022-12-06', '2022-12-07', '2022-12-08', '2022-12-09',
                    '2022-12-10', '2022-12-11', '2022-12-12', '2022-12-13', '2022-12-14', '2022-12-15']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['湖北', '上海', '广东', '吉林', '北京', '四川', '海南', '河南', '重庆', '内蒙古'],
                    axisLabel: {
                        interval: 0
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'bar'
                }
            ]
        }
    };

    //填充时间线数据
    $.ajax({
        type: "post",
        url: "/getProvinceDay",
        dataType: "json",        //返回数据形式为json
        success: function (totalCases) {    //{date:"2022-12-01",data:[12,12,32,...]}
            var array_data = [];
            var array_date = [];
            for (var i = 0; i < totalCases.length; i++) {
                array_data.push(totalCases[i].data);
                array_date.push(totalCases[i].date);
            }
            timeLineChart.hideLoading();    //隐藏加载动画
            timeLineChart.setOption({        //动态加载数据图表
                options: [
                    {
                        title: {text: "2022-12-01 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[0],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-02 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[1],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-03 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[2],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-04 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[3],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-05 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[4],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-06 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[5],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-07 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[6],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-08 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[7],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-09 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[8],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-10 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[9],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-11 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[10],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-12 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[11],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-13 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[12],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-14 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[13],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    },
                    {
                        title: {text: "2022-12-15 全国累计确诊前十省份（除香港、台湾）"},
                        series: {
                            data: array_data[14],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {color: 'black', fontSize: 16}
                                    }
                                }
                            }
                        }
                    }
                ]
            });
        }
    });

    timeLineChart.setOption(timeLineOption);
    lineChart.setOption(lineOption);
    myChart.setOption(option);
}